<script lang="ts">
export default {
  name: 'Test-test2-2'
}
</script>

<template>
  <h2>留言板系统</h2>
  <div class="note">
    <h3>要求：</h3>
    <p>1. 创建一个留言板组件 MessageBoard，包含一个用于输入留言的表单，并将留言显示在列表中。</p>
    <p>2. 创建一个子组件 MessageItem 用于显示单条留言。</p>
    <p>
      3. 父组件 MessageBoard 传递留言内容作为 props 给子组件 MessageItem，并通过 emit
      在子组件中触发删除留言的事件。
    </p>
    <p>4. 用 插槽，允许父组件自定义留言显示的样式。</p>
    <p>5. 使用 侦听器 监听输入框的变化，提示用户输入的字数限制（如限制为100个字符）。</p>
    <p>6. 使用 模板引用 访问表单输入元素。</p>
    <p>7. 使用 defineExpose 允许父组件获取子组件的一些内部数据或方法。</p>
  </div>
  <div class="group">
    <div>
      <h2>留言板</h2>

      <!-- 留言输入表单 -->
      <div>
        <label for="message">输入留言：</label>
        <textarea
          id="message"
          placeholder="请输入留言..."
          v-model="message"
          ref="messageInput"
        ></textarea>
        <p>剩余字符：{{ remainStrs }}</p>
        <button type="submit" @click="submitMsg">提交留言</button>
      </div>

      <!-- 留言列表 -->
      <ul>
        <!-- 留言条目 -->
        <li v-for="(msg, index) in messages" :key="index">
          <MessageItem :message @deleteMsg ="removeMsg(index)">
            <!-- 自定义留言显示的插槽 -->
            <template v-slot:default="{ msg }">
              <span>{{ msg }}</span>
            </template>
          </MessageItem>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import MessageItem from './MessageItem.vue';

const message = ref('')
const messages = ref([''])
const maxStrs = 100

let remainStrs = computed(()=>{
  return maxStrs - message.value.length
})

const submitMsg = () => {
  if(message.value.length >0 && message.value.length<=maxStrs){
    messages.value.push(message.value)
    message.value = ''
  }
}

const removeMsg = (index:number)=>{
  messages.value.splice(index,1)
}




</script>

<style scoped>
div {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

textarea {
  width: 100%;
  height: 100px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
}

button {
  background-color: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

button:hover {
  background-color: #218838;
}

p {
  margin-top: 0;
  font-size: 0.9em;
  color: #888;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
